import React, { Component } from 'react';

import { withRouter } from 'react-router-dom';

import { connect } from 'react-redux';

import {
  Button
} from 'antd-mobile';

import { addToCart } from '../../actions/cart'

@withRouter
//(mapStateToProps,store.getState()里面的,mapDispatchToProps)
@connect(null, { addToCart })

export default class Main extends Component {
  onAddToCart = (item, e)=> {
    e.stopPropagation();
    this.props.addToCart(item)
  }
  toDetail(id) {
    this.props.history.push(`/detail/${id}`);
  }
  render() {
    return (
      <ul>
        {
          this.props.categoryList.map(item => {
            return(
              <li key={item.id} onClick={this.toDetail.bind(this, item.id)}>
                <div className="thumb">
                  <img src={item.thumb} alt={item.name}/>
                </div>
                <div className="desc">
                  <h3>{item.name}</h3>
                  <div>
                    <span>￥{item.price}</span>
                  </div>
                </div>
                <Button size='small' type='primary' onClick={this.onAddToCart.bind(this, item)}>加入购物车</Button>
              </li>
            )
          })
        }
      </ul>
    )
  }
}
